<template>
  <div class="item">
    <span>原始密码：</span>
    <div>
      <el-input v-model="formData.oldLoginPwd" type="password" placeholder="请输入原始密码" size="mini" show-password />
    </div>
  </div>
  <div class="item">
    <span>最新密码：</span>
    <div>
      <el-input v-model="formData.newLoginPwd" type="password" placeholder="请输入最新密码" size="mini" show-password />
    </div>
  </div>
  <div class="item confirm-password">
    <span>确认密码：</span>
    <div>
      <el-input v-model="formData.newLoginPwd2" type="password" placeholder="请输入确认密码" size="mini" show-password />
      <p class="passwordTip" v-show="isShowTip">两次输入的密码不一致！</p>
    </div>
  </div>
  <div class="item">
    <span></span>
    <div>
      <el-button 
        size="small" 
        type="primary" 
        :disabled="isShowTip"
        @click="changePwd"
      >修改</el-button>
      <el-button 
        size="small" 
        @click="clearInput"
      >重置</el-button>
    </div>
  </div>
</template>

<script>
import {reactive, toRefs, watch} from 'vue';
import md5 from 'js-md5';
import {useStore} from 'vuex';
import {resetPwd} from '../../api/admin';

export default {
  name: 'ChangePwd',
  setup(){
    const $store = useStore();

    const state = reactive({
      formData: {
        oldLoginPwd: '', //原始密码
        newLoginPwd: '', //最新密码
        newLoginPwd2: '', //确认密码
      },
      isShowTip: false, //是否显示确认密码提示
    });

    watch(
      [() => state.formData.newLoginPwd, () => state.formData.newLoginPwd2],
      (value, oldValue) => {
        if(value[1] === state.formData.newLoginPwd && value[0] === state.formData.newLoginPwd2){
          //两次密码一致
          state.isShowTip = false;
        }else{
          //两次密码不一致
          state.isShowTip = true;
        }
      }
    );

    //修改密码
    const changePwd = async () => {
      const result = await resetPwd({
        ...state.formData,
        id: $store.state.admin.adminInfo.id,
      });

      if(result){
        //成功
        const loginId = localStorage.getItem('loginId');
        const loginPwd = localStorage.getItem('loginPwd');

        if(loginId && loginPwd){
          //浏览器缓存中有账号、密码
          const mdPwd = md5(md5(state.formData.newLoginPwd).split('').reverse().join(''));

          localStorage.setItem('loginPwd', mdPwd);
        }
      }
    }

    //重置输入
    const clearInput = () => {
      state.formData = {
        oldLoginPwd: '', //原始密码
        newLoginPwd: '', //最新密码
        newLoginPwd2: '', //确认密码
      }
    }

    return {
      ...toRefs(state),
      changePwd,
      clearInput,
    }
  },
}
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  &.confirm-password {
    align-items: baseline;
  }
  span {
    width: 70px;
    font-size: 14px;
    text-align: right;
  }
  div {
    width: 300px;
  }

  $imgLength: 90px;

  .avatar-uploader .avatar {
    width: $imgLength;
    height: $imgLength;
    display: block;
  }
  .passwordTip {
    color: var(--el-color-danger);
    font-size: 12px;
    padding-top: 5px;
  }
}
</style>